LinHuijuan's Blog

css语法

# css语法

[TOC]

# 一、顶层样式表规则

# 1.at-rule(at规则)

at-rule由一个 @ 关键字和后续的一个区块组成，如果没有区块，则以分号结束。这些at-rule在开发中使用机会远远小于普通的规则。

  • @charset ： https://www.w3.org/TR/css-syntax-3/ (opens new window)

    # @charset

    @charset用于提示CSS文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。

    @charset "utf-8";
    1

  • @import ：https://www.w3.org/TR/css-cascade-4/ (opens new window)

    # @import

    @import用于引入一个CSS文件，除了@charset规则不会被引入，@import可以引入另一个文件的全部内容。

    @import "mystyle.css";
@import url("mystyle.css");
@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;
    1
    2
    3
    4
    5

    通过代码，我们可以看出，import还支持 supports 和media query形式。

  • @media ：https://www.w3.org/TR/css3-conditional/ (opens new window)

    # @media

    media就是大名鼎鼎的media query使用的规则了，它能够对设备的类型进行一些判断。在media的区块内，是普通规则列表。

    @media print {
    body { font-size: 10pt }
}
    1
    2
    3

  • @page ： https://www.w3.org/TR/css-page-3/ (opens new window)

    # @page

    page用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

    @page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • @counter-style ：https://www.w3.org/TR/css-counter-styles-3 (opens new window)

    # @ counter-style

    counter-style产生一种数据，用于定义列表项的表现。

    @counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}
    1
    2
    3
    4
    5

  • @keyframes ：https://www.w3.org/TR/css-animations-1/ (opens new window)

    # @ key-frames

    keyframes产生一种数据，用于定义动画关键帧。

    @keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

  • @fontface ：https://www.w3.org/TR/css-fonts-3/ (opens new window)

    # @ fontface

    fontface用于定义一种字体，icon font技术就是利用这个特性来实现的。

    @font-face {
  font-family: Gentium;/* 可以自定义命名 */
  src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }
    1
    2
    3
    4
    5
    6

  • @supports ：https://www.w3.org/TR/css3-conditional/ (opens new window)

    # @ support

    support检查环境的特性，它与media比较类似。

  • @namespace ：https://www.w3.org/TR/css-namespaces-3/ (opens new window)

    # @ namespace

    用于跟XML命名空间配合的一个规则，表示内部的CSS选择器全都带上特定命名空间。

  • @viewport

    # @ viewport

    用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替。

# 2.qualified rule(普通规则)

qualified rule主要是由选择器和声明区块构成。声明区块又由属性和值构成。

选择器的符号

  • 空格: 后代，选中它的子节点和所有子节点的后代节点。
  • >: 子代，选中它的子节点。
  • +：直接后继选择器，选中它的下一个相邻节点。
  • ~：后继，选中它之后所有的相邻节点。
  • ||：列，选中表格中的一列。

属性是由中划线、下划线、字母等组成的标识符，CSS还支持使用反斜杠转义。我们需要注意的是：属性不允许使用连续的两个中划线开头，这样的属性会被认为是CSS变量。

在CSS Variables标准 (opens new window)中，以双中划线开头的属性被当作变量，与之配合的则是 var 函数：

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}
1
2
3
4
5
6
7
8

值的部分，主要在标准 CSS Values and Unit (opens new window)，根据每个CSS属性可以取到不同的值，这里的值可能是字符串、标识符。

CSS属性值可能是以下类型。

  • CSS范围的关键字：initial，unset，inherit，任何属性都可以的关键字。
  • 字符串：比如content属性。
  • URL：使用url() 函数的URL值。
  • 整数/实数：比如flex属性。
  • 维度：单位的整数/实数，比如width属性。
  • 百分比：大部分维度都支持。
  • 颜色：比如background-color属性。
  • 图片：比如background-image属性。
  • 2D位置：比如background-position属性。
  • 函数：来自函数的值，比如transform属性。

这里我们要重点介绍一下函数。一些属性会要求产生函数类型的值，比如easing-function会要求cubic-bezier()函数的值：

CSS支持一批特定的计算型函数：

  • calc()

    基本的表达式计算，它支持加减乘除四则运算。在针对维度进行计算时，calc()函数允许不同单位混合运算。

    section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}
    1
    2
    3
    4
    5

  • max()

    表示取两数中较大的一个。

  • min()

    表示取两数之中较小的一个。

  • clamp()

    给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。

  • toggle()

    在规则选中多于一个元素时生效，它会在几个值之间来回切换，比如我们要让一个列表项的样式圆点和方点间隔出现，可以使用下面代码：

    ul { list-style-type: toggle(circle, square); }
    1

  • attr()

    允许CSS接受属性值的控制。

CSS3 新特性